<template>
  <van-tabs v-model="active" animated  sticky>
  <van-tab v-for="(v,index) in arrs" :title="v" :key="index">
    <div class="ku">
    <van-swipe :autoplay="3000"  :height="300"  style="width:48%;border-radius: 7px">
    <van-swipe-item v-for="(image, index) in images" :key="index">
      <img v-lazy="image" />
    </van-swipe-item>
  </van-swipe>
  <div class="bi" style="width:48%">
    <div class="as">
        <img src="//storage.360buyimg.com/supermarket-bucket/sm_homepage/v3_0/img_feeds_rank_list_header_title.png" alt="" class="shi">
        <van-grid :column-num="2">
  <van-grid-item icon="//m.360buyimg.com/n1/jfs/t1/170148/30/25305/235683/6214aba4E3b560ddd/ed716f5f8955f356.png!q70.webp" text="热销400万+件" class="van-ellipsis" />
  <van-grid-item icon="//m.360buyimg.com/n1/jfs/t1/92537/8/21581/353820/6214a64fEf0f2c015/22c6ff22a5c7007d.png!q70.webp" text="热销100万+件"  class="van-ellipsis"/>
</van-grid>
    </div>
    <div class="as">
        <img src="//m.360buyimg.com/babel/jfs/t1/135205/32/29360/4260/63c51f82Fdd0a782c/57bd48db21a358a2.png" alt="" class="shii">
        <van-grid :column-num="2">
  <van-grid-item icon="//m.360buyimg.com/mobilecms/jfs/t1/179419/14/19899/629007/611e1ed1Ecad284ac/3f81ea7f43072c63.png!q70.webp" text="满200减30"  class="van-ellipsis"/>
  <van-grid-item icon="//m.360buyimg.com/mobilecms/jfs/t1/162181/30/24867/429738/61a1efd6E859d7823/547e36662233e24c.png!q70.webp" text="满149减15"  class="van-ellipsis"/>
</van-grid>
    </div>
  </div>
    </div>
    <MyWaterfall></MyWaterfall>
  </van-tab>
</van-tabs>
</template>

<script>
import Vue from 'vue';
import { Tab, Tabs } from 'vant';
Vue.use(Tab);
Vue.use(Tabs);
import { Lazyload } from "vant";

Vue.use(Lazyload);
import { Swipe, SwipeItem } from 'vant';

Vue.use(Swipe);
Vue.use(SwipeItem);
import { Grid, GridItem } from 'vant';
import MyWaterfall from '@/components/JH/homepage/MyWaterfall.vue';

Vue.use(Grid);
Vue.use(GridItem);
export default {
  components: { MyWaterfall },
data() {
    return {
        images: [
            '//m.360buyimg.com/babel/jfs/t1/180297/26/32578/72922/63e34fe2Fb585f3cd/3f0f12874bc64967.png!q70.webp',
            '//m.360buyimg.com/babel/jfs/t1/35687/34/16358/260696/63e1c3f7F048876d0/974f63498a76d46e.png!q70.webp',
            '//m.360buyimg.com/babel/jfs/t1/36497/21/20436/485086/63e0ab4bF5b093dc8/c9c54f544095b45b.png!q70.webp',
            '//m.360buyimg.com/babel/jfs/t1/82579/8/23922/339709/63db654bF3e855f2e/939e3a9d66c6b8ef.png!q70.webp',
        ],
        active: 0,
        arrs:['为你推荐','天天低价','名酒','粮油调味','食品饮料','生鲜果蔬','个护','玩具','宠物','母婴','家清'],
    }
},
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  background-color: #eee;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
img {
  /* width: 92vw; */
  /* width: 50%; */
  /* height: 90.88888889vw; */
  height: 100%;
  width: 100%;
}
.ku {
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    /* align-items: center; */
    margin-left: .51333rem;
    margin-right: .51333rem;
    margin-bottom: .21333rem;

}
.as {
    /* position: absolute; */
        width: 9.36rem;
    margin-left: .21333rem;
    margin-right: .32rem;
    margin-bottom: .21333rem;
    height: 134px;
    border-radius: 15px;
        
    background:url("//storage.360buyimg.com/supermarket-bucket/sm_homepage/v3_0/img_feeds_rank_list_header_bg_v2.png") no-repeat;
    /* background-size: 4.57333rem 1.18667rem; */
    background-color: #fff;
}
.bi {
    display: flex;
    flex-direction: column;
    height: 300px;
    justify-content: space-around;


}
.shi {
    width: 6.00667rem;
    height: 1rem;
    margin-top: .44rem;
    margin-left: .2rem;
}
.shii {
    width: 5.00667rem;
    height: 1rem;
    margin-top: .44rem;
    margin-left: .2rem;
}
</style>